<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>tree练习</title>
</head>
<script>
	
	function num(a){
		node=[];
		node[0]=[];
		
		node[0][0]={};
		node[0][0].x=600;//x坐标
		node[0][0].y=700;//y坐标
		node[0][0].l=150;//树干的长度
		node[0][0].w=18;//树干的粗度
		node[0][0].p=0.5*Math.PI;
		//树枝的倾斜角度
		for(var i=1;i<=a;i++){
			node[i]=[]
			node[i][0]='0'
			for(var j=1;j<=Math.pow(2,i-1);j++){	
				node[i][j]={}
				if(i==1&&j==1){
					node[i][j].x=node[0][0].x//x坐标
					node[i][j].y=node[0][0].y-150;//y坐标
					node[i][j].l=node[0][0].l;//树干的长度
					node[i][j].w=node[0][0].w;//树干的粗度
					node[i][j].p=node[0][0].p;
					//树枝的倾斜角度
					}
				else{f(i,j)}
				//tree(i);
				}
			}			
		}
		num(6)
	function f(i,j){
		node[i][j].w=node[i-1][Math.ceil(j/2)].w*0.8;
		if(j%2==0){node[i][j].p=node[i-1][Math.ceil(j/2)].p-(1/6*Math.PI);
		node[i][j].l=node[i-1][Math.ceil(j/2)].l*(Math.random()*50+50)/100;
		}
		else{node[i][j].p=node[i-1][Math.ceil(j/2)].p+(1/6*Math.PI);
		node[i][j].l=node[i-1][Math.ceil(j/2)].l*(Math.random()*60+40)/100;		
		}
		node[i][j].x=node[i-1][Math.ceil(j/2)].x-node[i-1][Math.ceil(j/2)].l*Math.cos(node[i][j].p);	
		node[i][j].y=node[i-1][Math.ceil(j/2)].y-node[i-1][Math.ceil(j/2)].l*Math.sin(node[i][j].p);
		
		}
	window.onload=function(){
		var huabu=document.getElementById('huabu');
		var hua=huabu.getContext('2d');
		var z=1;
		hua.fillStyle='#ccc'
		hua.fillRect(0,0,1200,1000);
		var gad=hua.createLinearGradient(100,0,1100,0)
		gad.addColorStop(0,'red');
		gad.addColorStop(0.15,'green');
		gad.addColorStop(0.3,'yellow');
		gad.addColorStop(0.45,'white');
		gad.addColorStop(0.7,'black');
		gad.addColorStop(0.85,'blue');
		gad.addColorStop(1,'pink');
	
		
		
		function tree(a){
			hua.beginPath();
			hua.lineWidth=node[0][0].w;
			hua.strokeStyle=gad;
			hua.moveTo(node[0][0].x,node[0][0].y)
			hua.lineTo(node[1][1].x,node[1][1].y)
			hua.stroke();
			hua.closePath();
			for(var i=2;i<=a;i++){
			for(var j=1;j<=Math.pow(2,i-1);j++){
				hua.beginPath();
				hua.strokeStyle=gad;
				hua.lineWidth=node[i][j].w;
				hua.lineCap='round'
				hua.moveTo(node[i][j].x,node[i][j].y)
				hua.lineTo(node[i-1][Math.ceil(j/2)].x,node[i-1][Math.ceil(j/2)].y)
				hua.stroke();
				hua.closePath();
				if(i>a){
					hua.beginPath();
					var gad2=hua.createRadialGradient(node[i][j].x,node[i][j].y,0,node[i][j].x,node[i][j].y,(node[i][j].l*0.8))
					gad2.addColorStop(0,'white')
					gad2.addColorStop(0.25,'green')
					gad2.addColorStop(0.9,'#000')
					hua.fillStyle=gad2;
					hua.arc(node[i][j].x,node[i][j].y,(node[i][j].l*0.8),0,2*Math.PI,true)
					hua.fill();
					hua.closePath();
					}
				}
				

			}
			
		}
		tree(6)
		/*
		setInterval(function(){
			hua.clearRect(0,0,1200,1000)
			num(6);
			tree(6);
			},3000)
		*/
		huabu.onclick=function(eve){
			hua.clearRect(0,0,1200,1000)
			var e=eve||window.event;
			node[0][0].x=e.clientX;
			node[0][0].y=e.clientY;
			node[1][1].x=node[0][0].x;
			node[1][1].y=node[0][0].y-150;
			
		
			var i=1;
			tree(6)
			timer=setInterval(donghua,50)
			function donghua(){
				i++
				hua.clearRect(0,0,1200,1000)
				for(var j=1;j<=Math.pow(2,i-1);j++){
					f(i,j);
					
					}
					tree(6)
					if(i==6){
						clearInterval(timer)
						}
				
				}
			}
		
		}

		
</script>
<body>
<canvas id="huabu"  width="1200" height="1000"></canvas>
</body>
</html>